<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head th:include="ui/common/taglibs::head">
</head>
<body>
<div class="easyui-layout" data-options="fit:true">
		<div class="floating_layer">
	        <b class='fold_button fold_button_center' onclick='exPandTab(this)'>展开搜索</b>
	    </div>
		<div data-options="region:'north'" class="ycSearch searchArea" fit="true">
			<!-- 查询条件表单 -->
			<form id="search_form" >
				<div class="searchP searchPad">
					<em>登录名称：</em>
					<input type="text" name="loginName" class="easyui-textbox" data-options=""/>
				</div>
				<div class="searchP searchPad">
					<em>登录名称：</em>
					<input type="text" name="loginName" class="easyui-textbox" data-options=""/>
				</div>
				<div class="searchP searchPad">
					<em>登录名称：</em>
					<input type="text" name="loginName" class="easyui-textbox" data-options=""/>
				</div>
				<div class="searchP searchPad">
					<em>登录名称：</em>
					<input type="text" name="loginName" class="easyui-textbox" data-options=""/>
				</div>
				<div class="searchP searchPad">
					<em>登录名称：</em>
					<input type="text" name="loginName" class="easyui-textbox" data-options=""/>
				</div>
				<div class="searchP spButton">
					<p><a href="javascript:void(0)" class="sQuery" onclick=""></a></p>	
			 	</div>
			</form>
		</div>
		
		<div data-options="region:'center'" >
			<div class="easyui-layout ycBottom" data-options="fit:true">
				<!--圆形进度条-->
				 <div id="indicatorContainer" style="margin:auto;width:120px"></div>
				 <button class="timea" style="display:block;margin:auto;width:120px">改变</button>        
			</div>
		</div>
			
</div>
<script type="text/javascript">
$('#indicatorContainer').radialIndicator({
	radius:50,//定义圆形指示器的内部的圆的半径。
	roundCorner:true,//如果设置为true则圆形指示器的刻度条有圆角
	frameTime:10,//定义圆形指示器的刻度条行动的时间。
	barWidth:10,//定义圆形指示器的刻度条的宽度。
	barBgColor:'#e2e2e2',//定义圆形指示器的刻度条默认的背景颜色。
	barColor: {
	        0: '#FF0000',
	        33: '#FFFF00',
	        66: '#0066FF',
	        100: '#33CC33'
	},//定义圆形指示器的刻度条覆盖的背景颜色,可在不同的进度设置不同的颜色也可统一一种颜色。
	initValue:0,//圆形指示器初始化的值。
	fontWeight:'bold',//定义圆形指示器的内圆文字是否加粗。
	fontSize:30,//定义圆形指示器的内圆文字的字体大小。
	fontFamily:'微软雅黑',//定义圆形指示器的内圆文字的字体。
	fontColor:'black',//定义圆形指示器的内圆文字的颜色，如果不设置则默认为刻度条覆盖的背景颜色。
	minValue:0,//定义圆形指示器的最小值。
	maxValue:100,//定义圆形指示器的最大值。
});  
$('.timea').click(function(){
	//获取对象实例
	var radialObj = $('#indicatorContainer').data('radialIndicator');
	//动态改变进度条的进度值
	radialObj.animate(80);
})
</script>
</body>
</html>
